<template>
  <div id="content" style="width: 50em;">

    <div style="margin-top: 12px; text-align: left">
      <el-button @click="findApiInfoDo" circle size="small"
                 title="接口信息刷新">
        <el-icon>
          <Refresh/>
        </el-icon>
      </el-button>
      <el-button size="small" @click="openHandle">
        <div v-if="openFlag">全展开</div>
        <div v-else>全折叠</div>
      </el-button>
      <el-button type="primary" size="small" plain @click="downloadThisApiInfo">
        下载
        <el-icon class="el-icon--right">
          <Download/>
        </el-icon>
      </el-button>
      <el-button @click="setWriteFlag" size="small" v-if="updateFlag">
        <div v-if="writeFlag">查看</div>
        <div v-else>修改</div>
      </el-button>
    </div>

    <el-scrollbar height="88vh">
      <h2>{{ documentsInfo.currentApiInfo.apiInfo.apiName }}</h2>

      <el-collapse v-model="displayItems">
        <el-collapse-item :title="apiMenuTitle.apiInfo.title" name="apiInfo">
          <api-info :api-info="documentsInfo.currentApiInfo.apiInfo" :write-flag="writeFlag"/>
        </el-collapse-item>

        <el-collapse-item :title="apiMenuTitle.paramFieldDesc.title" name="paramDesc">
          <param-desc :write-flag="writeFlag" :desc-vo="this.documentsInfo.currentApiInfo.apiParamDescVo"
                      v-if="this.documentsInfo.currentApiInfo.apiParamDescVo"/>
        </el-collapse-item>

        <el-collapse-item :title="apiMenuTitle.paramHis.title" name="paramHis">
          <param-hist :write-flag="writeFlag" :param="this.documentsInfo.currentApiInfo" @findApiInfo="findApiInfoDo"/>
        </el-collapse-item>

        <el-collapse-item :title="apiMenuTitle.business.title" name="business">
          <h5>业务逻辑展示</h5>
        </el-collapse-item>
      </el-collapse>
    </el-scrollbar>
  </div>
</template>
<script>
import ParamDesc from "@/components/document/ParamDesc"
import ParamHist from "@/components/document/ParamHist"
import ApiDocConstants from "@/utils/api-utils/ApiDocConstants";
import {Download, Edit, Folder, Link, Plus, Refresh} from '@element-plus/icons-vue'
import ApiInfo from "@/components/document/ApiInfo";
import myaxios from "@/plugins/myaxios";
import CommonUtils from "@/utils/CommonUtils";

export default {
  name: 'doc-body-all',
  components: {ApiInfo, ParamDesc, ParamHist, Edit, Folder, Link, Plus, Refresh, Download},
  props: {
    documentsInfo: {
      type: Object,
      default: ApiDocConstants.documentsInfo
    },
    findApiInfoDo: {},
    writeFlag: {
      type: Boolean,
      default: false
    },
    updateFlag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      displayItems: ['apiInfo', 'paramDesc', 'paramHis', 'business'],
      openFlag: false,
      apiMenuTitle: ApiDocConstants.apiMenuTitle
    }
  },
  methods: {
    openHandle() {
      if (this.openFlag) {
        this.displayItems = ['apiInfo', 'paramDesc', 'paramHis', 'business']
      } else {
        this.displayItems = []
      }
      this.openFlag = !this.openFlag
    },
    test() {
      console.log(this.$store.state.allEnum)
    },
    setWriteFlag() {
      this.$emit('custom-event', !this.writeFlag)
    },
    downloadThisApiInfo() {
      console.log("下载文档")
      let uri = "/dist/file/download/apiInfoOne/" + this.documentsInfo.currentApiInfo.apiInfo.id + "/" + 1;
      myaxios({
        method: 'get',
        url: uri,
        responseType: 'blob', // 指定response类型为blob类型，可直接解析二进制数据
      }).then(CommonUtils.fileDownload)
    }
  }
}
</script>
<style>
/*折叠标题*/
.el-collapse-item__header {
  font-size: 1.1em !important;
  font-weight: bold !important;
  color: #ba3925 !important;
}

h5, h6 {
  text-align: left;
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

img, object, embed {
  max-width: 100%;
  height: auto
}

h3 {
  font-size: 1.17em;
  font-weight: bold !important;
  font-family: Avenir, Helvetica, Arial, sans-serif !important;
  text-align: left;
  color: #ba3925;
}

h2 {
  color: #ba3925;;
}

h4 {
  font-size: 1.1em
}

h5 {
  font-size: 1em
}

h6 {
  font-size: 0.8em
}

#content {
  width: 100%;
  margin: 0 auto;
  max-width: 62.5em;
  *zoom: 1;
  position: relative;
  padding-left: .9375em;
  padding-right: .9375em
}

#content {
  margin-top: 0.5em
}

</style>